<template>
  <div class="execution">
    <basic-container>
      <el-form
        v-model="labelPosition"
        label-width="120px"
        :rules="rules"
        ref="giftForm"
        :model="giftForm"
      >
        <el-form-item label="礼品卷名称：" prop="giftName">
          <el-input v-model="giftForm.giftName"></el-input>
        </el-form-item>
        <el-form-item label="发行数量：" prop="quantity">
          <el-input v-model="giftForm.quantity"></el-input>
        </el-form-item>
        <el-form-item label="一级用户：" prop="oneLevel">
          <el-select
            v-model="giftForm.oneLevel"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级用户：" prop="twoLevel">
          <el-select
            v-model="giftForm.twoLevel"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="合作公司：" prop="partner">
          <el-input v-model="giftForm.partner"></el-input>
        </el-form-item>

        <el-form-item label="是否永久：">
          <el-radio-group v-model="giftForm.permanentValidity">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="有效期：" v-if="giftForm.permanentValidity === 2">
          <el-date-picker
            v-model="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="是否包邮：" prop="postage">
          <el-radio-group v-model="giftForm.postage">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="金额：" v-if="giftForm.postage === 2">
          <el-input
            placeholder="请输入不包邮的金额~"
            v-model="giftForm.money"
          ></el-input>
        </el-form-item>

        <el-form-item label="店铺：" prop="storeId">
          <el-select v-model="giftForm.storeId" placeholder="请选择">
            <el-option
              v-for="item in storeOptions"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择商品" prop="psParam">
          <el-button
            type="primary"
            round
            @click="selechProudt()"
            size="small"
            icon="el-icon-plus"
            >选择商品</el-button
          >
          <div style="margin-top: 20px">
            <el-table
              border
              :data="multipleSelection"
              :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
            >
              <el-table-column label="商品缩略图">
                <template slot-scope="scope">
                  <div style="display: flex; align-items: center">
                    <img
                      :src="scope.row.productPic"
                      style="width: 50px; height: 50px; margin-right: 10px"
                    />
                    <span>{{ scope.row.productName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="规格"
                prop="sku"
                align="center"
              ></el-table-column>
              <el-table-column
                label="价格"
                prop="price"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="hanldGift('giftForm')"
            >确 定</el-button
          >
          <el-button>取 消</el-button>
        </el-form-item>
      </el-form>

      <el-dialog title="选择商品" :visible.sync="dialogVisible" width="60%">
        <div class="table-container">
          <el-table
            :data="dialogVList"
            :header-cell-style="{ color: '#4D4D4D', background: '#F1F2F7' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
            ></el-table-column>
            <el-table-column label="商品缩略图">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <img
                    :src="scope.row.productPic"
                    style="width: 50px; height: 50px; margin-right: 10px"
                  />
                  <span>{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="规格"
              prop="sku"
              align="center"
            ></el-table-column>
            <el-table-column
              label="价格"
              prop="price"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <div>
            <el-button type="primary" plain @click="dialogProudt()"
              >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
          <el-pagination
            style="float: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5, 10, 15]"
            :current-page.sync="listQuery.current"
            :total="total"
          ></el-pagination>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import { addGift, accordStoreIdQuery, memberList } from "@/api/marke/index";
import { getStore } from "@/api/rms/rmsstore";

export default {
  data() {
    return {
      labelPosition: "right",
      options: [],
      loading: false,
      datetime: [],
      storeOptions: [],
      giftForm: {
        giftName: null,
        quantity: null,
        oneLevel: null,
        twoLevel: null,
        partner: null,
        permanentValidity: 1,
        postage: 1,
        money: 0,
        storeId: null,
        psParam: [],
      },
      rules: {
        giftName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        quantity: [{ required: true, message: "请填数量", trigger: "change" }],
        oneLevel: [
          { required: true, message: "请选择一级用户", trigger: "change" },
        ],
        twoLevel: [
          { required: true, message: "请选择二级用户", trigger: "change" },
        ],
        partner: [
          { required: true, message: "请输入合作公司", trigger: "change" },
        ],
        storeId: [{ required: true, message: "请选择店铺", trigger: "change" }],
        psParam: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个商品",
            trigger: "change",
          },
        ],
      },
      dialogVisible: false,
      listQuery: {
        size: 10,
        current: 1,
        storeId: null,
      },
      total: 0,
      dialogVList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.getStoreList();
    this.getMemberList();
  },
  methods: {
    getStoreList() {
      getStore().then((res) => {
        this.storeOptions = res.data.data;
      });
    },
    getMemberList() {
      memberList(this.listQuery).then((res) => {
        this.options = res.data.data.records;
      });
    },

    selechProudt() {
      if (this.giftForm.storeId) {
        this.dialogVisible = true;
        this.getStoreProdute();
      } else {
        this.$message({
          message: "请先选择店铺~",
          type: "warning",
          duration: 1000,
        });
        return;
      }
    },
    getStoreProdute() {
      this.listQuery.storeId = this.giftForm.storeId;
      accordStoreIdQuery(this.listQuery).then((res) => {
        this.dialogVList = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getStoreProdute();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getStoreProdute();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogProudt() {
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message({
          message: "请选择要操作的商品",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      this.dialogVisible = false;
    },
    hanldGift(giftForm) {
      let arr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push({
          productId: this.multipleSelection[i].productId,
          skuId: this.multipleSelection[i].skuId,
        });
      }
      this.giftForm.psParam = arr;

      this.$refs[giftForm].validate((valid) => {
        if (valid) {
          if (this.giftForm.permanentValidity === 2 && !this.datetime) {
            this.$message({
              message: "请选择有效时间范围~",
              type: "warning",
              duration: 1000,
            });
            return;
          }

          if (this.giftForm.postage === 2 && !giftForm.money) {
            this.$message({
              message: "请输入不包邮金额~",
              type: "warning",
              duration: 1000,
            });
            return;
          }

          if (this.giftForm.oneLevel === this.giftForm.twoLevel) {
            this.$message({
              message: "一级和二级不能选择同一个用户，请重新选择不同用户~",
              type: "warning",
              duration: 1000,
            });
            return;
          }
          if(this.datetime.length>1) {
            this.giftForm.beginTime = this.datetime[0]
            this.giftForm.endTime = this.datetime[1]
          }
          addGift(this.giftForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              this.$router.go(-1);
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
                duration: 1000,
              });
            }
          });
        }
      });
    },
  },
};
</script>
